@charset 'UTF-8';

@import '~/scss/themes/index.scss';
@import '~/scss/helpers/_text.scss';

/*******************************
          图片
*******************************/

.g2-image {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  background-color: $fill-base;
  img & {
    display: block;
  }

  svg,
  img {
    display: block;
    height: auto;
    max-width: 100%;
  }

  &.is-hidden {
    display: none;
  }

  &.is-disabled {
    cursor: default;
    opacity: $opacity-disabled;
  }

  &.is-rounded {
    border-radius: 0.325em;
  }

  &.is-circled {
    border-radius: 50%;
  }
  /*------------------
    Vertical Aligned
  -------------------*/
  &.is-align-top,
  &.is-align-top img,
  &.is-align-top svg {
    display: inline-block;
    vertical-align: top;
  }
  &.is-align-middle,
  &.is-align-middle img,
  &.is-align-middle svg {
    display: inline-block;
    vertical-align: middle;
  }
  &.is-align-bottom,
  &.is-align-bottom img,
  &.is-align-bottom svg {
    display: inline-block;
    vertical-align: bottom;
  }

  /*------------------
      Size
  -------------------*/
  .g2-images.is-lg &,
  &.is-lg,
  &.is-lg img,
  &.is-lg svg {
    width: 450px;
    height: auto;
    font: 1rem;
  }
  .g2-images.is-md &,
  &.is-md,
  &.is-md img,
  &.is-md svg {
    width: 300px;
    height: auto;
    font: 1rem;
  }
  .g2-images.is-sm &,
  &.is-sm,
  &.is-sm img,
  &.is-sm svg {
    width: 150px;
    height: auto;
    font: 1rem;
  }
  .g2-images.is-xs &,
  &.is-xs,
  &.is-xs img,
  &.is-xs svg {
    width: 35px;
    height: auto;
    font: 1rem;
  }
}
